<template>


<datavindex></datavindex>
  <!-- <lay-container fluid="true" style="padding: 10px">
    <lay-row space="10">
      <lay-col md="18" sm="18" xs="24">
        <lay-row :space="10">
          <lay-col :md="12">
            <lay-card class="project-grids">
              <template v-slot:title> 今日扫描 </template>

              <template v-slot:body>
       
                <div style="height: 300px;" ref="smRef"></div>
              </template>
            </lay-card>
          </lay-col>
          <lay-col :md="12">
            <lay-card class="project-grids">
              <template v-slot:title> 今日线上订单 </template>

              <template v-slot:body>
                <div style="height: 300px;" ref="xsRef"></div>
              </template>
            </lay-card>
          </lay-col>

          <lay-col :md="24">
            <lay-card>
              <template #title> 订单统计 </template>
              <div style="height: 300px;" ref="mainRef"></div>
            </lay-card>

          </lay-col>
        </lay-row>
      </lay-col>
      <lay-col md="6" sm="6" xs="24">
        <lay-row :space="10">
 
          <lay-col :md="24">
            <lay-card>

              <div style="height: 300px;" ref="clockRef"></div>
            </lay-card>
          </lay-col>
          <lay-col :md="24">
            <lay-card>
              <template #title> 正在发生 </template>
              <div style="height: 300px;color: #000;">
                {{ messgees }}
              </div>
            </lay-card>

   
          </lay-col>
        </lay-row>
      </lay-col>
    </lay-row>
  </lay-container> -->

</template>
<script lang="ts" setup>

import datavindex from '@/components/datav/datavindex.vue'
// import { ref, watch, reactive, onMounted, onUnmounted } from 'vue';
// import { layer } from '@layui/layui-vue';
// import webosutils from 'webosutils';
// import { useUserStore } from '../../../store/user';
// import config from '../../../config';
// import listutils from '../../../utils/listutils';
// import * as echarts from 'echarts'

// const ssss=ref([]);
// const loading = ref(false);
// const mainRef = ref(null);
// const selectedKeys = ref([]);
// const connected = ref(false);
// const clockRef = ref(null);
// const userstore = useUserStore();
// const messgees = ref("");
// const text = ref("");
// const smRef=ref(null);
// const xsRef=ref(null);
// //今日消费详情
// const daydata=()=>{
//   var main = smRef.value;
//   var myChart = echarts.init(main);
//   webosutils.http.post("/v1/api/consum/GetSMOnDayStatistics",{}).then((res:any)=>{
//      ;
//     if(res.success){
//       let option = {
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'cross',
//         crossStyle: {
//           color: '#999'
//         }
//       }
//     },
//     toolbox: {
//       feature: {
//         dataView: { show: true, readOnly: false },
//         magicType: { show: true, type: ['line', 'bar'] },
//         restore: { show: true },
//         saveAsImage: { show: true }
//       }
//     },
//     legend: {
//       data: ['今日扫码消费']
//     },
//     xAxis: [
//       {
//         type: 'category',
//         data: res.data.map((v:any) => v.title),
//         axisPointer: {
//           type: 'shadow'
//         }
//       }
//     ],
//     yAxis: [
//       {
//         type: 'value',
//         name: '就餐人次',
//         min: 0,
//         max: 250,
//         interval: 50,
//         axisLabel: {
//           formatter: '{value} 次'
//         }
//       },
  
//     ],
//     series: [
//       {
//         name: '扫码数量',
//         type: 'bar',
//         tooltip: {
//           valueFormatter: function (value: number) {
//             return value + ' 次数';
//           }
//         },
//         data: res.data.map((v:any) => v.count)
//       }
   
//     ]

//   };
//   myChart.setOption(option);
//     }
//   });

// }
// //今日订单详情
// const orderDay=()=>{
//   var main = xsRef.value;
//   var myChart = echarts.init(main)
//   webosutils.http.post("/v1/api/consum/GetOrderOnDayStatistics",{}).then((res:any)=>{
//      ;
//     if(res.success){
//       let option = {
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'cross',
//         crossStyle: {
//           color: '#999'
//         }
//       }
//     },
//     toolbox: {
//       feature: {
//         dataView: { show: true, readOnly: false },
//         magicType: { show: true, type: ['line', 'bar'] },
//         restore: { show: true },
//         saveAsImage: { show: true }
//       }
//     },
//     legend: {
//       data: ['今日扫码消费']
//     },
//     xAxis: [
//       {
//         type: 'category',
//         data: res.data.map((v:any) => v.title),
//         axisPointer: {
//           type: 'shadow'
//         }
//       }
//     ],
//     yAxis: [
//       {
//         type: 'value',
//         name: '已完成的订单',
//         min: 0,
//         max: 250,
//         interval: 50,
//         axisLabel: {
//           formatter: '{value} 次'
//         }
//       },
  
//     ],
//     series: [
//       {
//         name: '已完成的订单',
//         type: 'bar',
//         tooltip: {
//           valueFormatter: function (value: number) {
//             return value + ' 次数';
//           }
//         },
//         data: res.data.map((v:any) => v.count)
//       }
   
//     ]

//   };
//   myChart.setOption(option);
//     }
//   });
// }
// const dz = () => {
//   var main = mainRef.value;
//   var myChart = echarts.init(main)
//   let option = {
//     tooltip: {
//       trigger: 'axis',
//       axisPointer: {
//         type: 'cross',
//         crossStyle: {
//           color: '#999'
//         }
//       }
//     },
//     toolbox: {
//       feature: {
//         dataView: { show: true, readOnly: false },
//         magicType: { show: true, type: ['line', 'bar'] },
//         restore: { show: true },
//         saveAsImage: { show: true }
//       }
//     },
//     legend: {
//       data: ['扫码就餐', '线上订单', '趋势']
//     },
//     xAxis: [
//       {
//         type: 'category',
//         data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
//         axisPointer: {
//           type: 'shadow'
//         }
//       }
//     ],
//     yAxis: [
//       {
//         type: 'value',
//         name: '扫码就餐',
//         min: 0,
//         max: 250,
//         interval: 50,
//         axisLabel: {
//           formatter: '{value} ml'
//         }
//       },
//       {
//         type: 'value',
//         name: '线上订单',
//         min: 0,
//         max: 25,
//         interval: 5,
//         axisLabel: {
//           formatter: '{value} °C'
//         }
//       }
//     ],
//     series: [
//       {
//         name: '趋势',
//         type: 'bar',
//         tooltip: {
//           valueFormatter: function (value: number) {
//             return value + ' ml';
//           }
//         },
//         data: [
//           2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
//         ]
//       },
//       {
//         name: '扫码就餐',
//         type: 'bar',
//         tooltip: {
//           valueFormatter: function (value: number) {
//             return value + ' ml';
//           }
//         },
//         data: [
//           2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
//         ]
//       },
//       {
//         name: '线上订单',
//         type: 'line',
//         yAxisIndex: 1,
//         tooltip: {
//           valueFormatter: function (value: number) {
//             return value + ' °C';
//           }
//         },
//         data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
//       }
//     ]

//   };
//   myChart.setOption(option);

// }
// const clock = () => {
//   var clock = clockRef.value;
//   var myChart = echarts.init(clock);
//   let option = {
//     series: [
//       {
//         name: 'hour',
//         type: 'gauge',
//         startAngle: 90,
//         endAngle: -270,
//         min: 0,
//         max: 12,
//         splitNumber: 12,
//         clockwise: true,
//         axisLine: {
//           lineStyle: {
//             width: 15,
//             color: [[1, 'rgba(0,0,0,0.7)']],
//             shadowColor: 'rgba(0, 0, 0, 0.5)',
//             shadowBlur: 15
//           }
//         },
//         splitLine: {
//           lineStyle: {
//             shadowColor: 'rgba(0, 0, 0, 0.3)',
//             shadowBlur: 3,
//             shadowOffsetX: 1,
//             shadowOffsetY: 2
//           }
//         },
//         axisLabel: {
//           fontSize: 14,
//           distance: 25,
//           formatter: function (value: number) {
//             if (value === 0) {
//               return '';
//             }
//             return value + '';
//           }
//         },
//         // anchor: {
//         //   show: true,
//         //   icon:
//         //     'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
//         //   showAbove: false,
//         //   offsetCenter: [0, '-35%'],
//         //   size: 10,
//         //   keepAspect: true,
//         //   itemStyle: {
//         //     color: '#707177'
//         //   }
//         // },
//         pointer: {
//           icon:
//             'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
//           width: 12,
//           length: '55%',
//           offsetCenter: [0, '8%'],
//           itemStyle: {
//             color: '#C0911F',
//             shadowColor: 'rgba(0, 0, 0, 0.3)',
//             shadowBlur: 8,
//             shadowOffsetX: 2,
//             shadowOffsetY: 4
//           }
//         },
//         detail: {
//           show: false
//         },
//         title: {
//           offsetCenter: [0, '30%']
//         },
//         data: [
//           {
//             value: 0
//           }
//         ]
//       },
//       {
//         name: 'minute',
//         type: 'gauge',
//         startAngle: 90,
//         endAngle: -270,
//         min: 0,
//         max: 60,
//         clockwise: true,
//         axisLine: {
//           show: false
//         },
//         splitLine: {
//           show: false
//         },
//         axisTick: {
//           show: false
//         },
//         axisLabel: {
//           show: false
//         },
//         pointer: {
//           icon:
//             'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
//           width: 8,
//           length: '70%',
//           offsetCenter: [0, '8%'],
//           itemStyle: {
//             color: '#C0911F',
//             shadowColor: 'rgba(0, 0, 0, 0.3)',
//             shadowBlur: 8,
//             shadowOffsetX: 2,
//             shadowOffsetY: 4
//           }
//         },
//         // anchor: {
//         //   show: true,
//         //   size: 20,
//         //   showAbove: false,
//         //   itemStyle: {
//         //     borderWidth: 15,
//         //     borderColor: '#C0911F',
//         //     shadowColor: 'rgba(0, 0, 0, 0.3)',
//         //     shadowBlur: 8,
//         //     shadowOffsetX: 2,
//         //     shadowOffsetY: 4
//         //   }
//         // },
//         detail: {
//           show: false
//         },
//         title: {
//           offsetCenter: ['0%', '-40%']
//         },
//         data: [
//           {
//             value: 0
//           }
//         ]
//       },
//       {
//         name: 'second',
//         type: 'gauge',
//         startAngle: 90,
//         endAngle: -270,
//         min: 0,
//         max: 60,
//         animationEasingUpdate: 'bounceOut',
//         clockwise: true,
//         axisLine: {
//           show: false
//         },
//         splitLine: {
//           show: false
//         },
//         axisTick: {
//           show: false
//         },
//         axisLabel: {
//           show: false
//         },
//         pointer: {
//           icon:
//             'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
//           width: 4,
//           length: '85%',
//           offsetCenter: [0, '8%'],
//           itemStyle: {
//             color: '#C0911F',
//             shadowColor: 'rgba(0, 0, 0, 0.3)',
//             shadowBlur: 8,
//             shadowOffsetX: 2,
//             shadowOffsetY: 4
//           }
//         },
//         anchor: {
//           show: true,
//           size: 15,
//           showAbove: true,
//           itemStyle: {
//             color: '#C0911F',
//             shadowColor: 'rgba(0, 0, 0, 0.3)',
//             shadowBlur: 8,
//             shadowOffsetX: 2,
//             shadowOffsetY: 4
//           }
//         },
//         detail: {
//           show: false
//         },
//         title: {
//           offsetCenter: ['0%', '-40%']
//         },
//         data: [
//           {
//             value: 0
//           }
//         ]
//       }
//     ]
//   };

//   setInterval(function () {
//     var date = new Date();
//     var second = date.getSeconds();
//     var minute = date.getMinutes() + second / 60;
//     var hour = (date.getHours() % 12) + minute / 60;

//     option.animationDurationUpdate = 300;
//     myChart.setOption<echarts.EChartsOption>({
//       series: [
//         {
//           name: 'hour',
//           animation: hour !== 0,
//           data: [{ value: hour }]
//         },
//         {
//           name: 'minute',
//           animation: minute !== 0,
//           data: [{ value: minute }]
//         },
//         {
//           animation: second !== 0,
//           name: 'second',
//           data: [{ value: second }]
//         }
//       ]
//     });
//   }, 1000);
//   myChart.setOption(option);

// }

// const messages = ref([]);
// const ws = new WebSocket(config.ws + '/websocket.ws/consumption/' + userstore.userInfo.userid);




// onMounted(() => {
//   ws.onopen = listutils.WebSocketOpen;
//   ws.onmessage = listutils.WebSocketMessage;
//   ws.onclose =listutils.WebSocketClose;
//   ws.onerror = listutils.WebSocketError;
//   dz();
//   clock();
//   daydata();
//   orderDay();
// });

// onUnmounted(() => {
//   ws.close();
//   ws.onopen = null;
//   ws.onmessage = null;
//   ws.onclose = null;
//   ws.onerror = null;
// });


// // import { defineComponent, ref, onMounted } from 'vue'
// // import * as echarts from 'echarts'
// // import { useI18n } from '@layui/layui-vue'

// // export default defineComponent({
// //   setup() {

// //     const { t } = useI18n()

// //     const mainRef = ref();
// //     const mainRef1 = ref();
// //     const mainRef2 = ref();
// //     const mainRef3 = ref();
// //     onMounted(() => {
// //       var chartDom = mainRef.value

// //       // @ts-ignore
// //       var myChart = echarts.init(chartDom)

// //       var option = {
// //         radar: {
// //           indicator: [
// //             { name: '进攻', max: 6500 },
// //             { name: '技巧', max: 16000 },
// //             { name: '力量', max: 30000 },
// //             { name: '速度', max: 38000 },
// //             { name: '体能', max: 52000 },
// //             { name: '防守', max: 25000 }
// //           ]
// //         },
// //         series: [
// //           {
// //             name: 'Budget vs spending',
// //             type: 'radar',
// //             data: [
// //               {
// //                 value: [4200, 3000, 20000, 35000, 50000, 18000]
// //               },
// //               {
// //                 value: [5000, 14000, 28000, 26000, 42000, 21000]
// //               }
// //             ]
// //           }
// //         ]
// //       }

// //       myChart.setOption(option);

// //  
// //             // @ts-ignore
// //             var chartDom1 = mainRef1.value
// //             var chartDom2 = mainRef2.value
// //             var chartDom3 = mainRef3.value
// //             var myChart1 = echarts.init(chartDom1);
// //             var myChart2 = echarts.init(chartDom2);
// //             var myChart3 = echarts.init(chartDom3);
// //       var option1 = {
// //         xAxis: {
// //           type: 'category',
// //           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Bai', 'Fan', 'Yue', 'Qian']
// //         },
// //         yAxis: {
// //           type: 'value'
// //         },
// //         grid: {
// //           x: '50px',
// //           y: '50px',
// //           x2: '50px',
// //           y2: '50px',
// //         },
// //         series: [
// //           {
// //             data: [120, 200, 150, 80, 70, 110, 130, 50, 40, 70, 100],
// //             type: 'bar',
// //             showBackground: true,
// //             backgroundStyle: {
// //               color: 'rgba(180, 180, 180, 0.2)'
// //             },
// //             itemStyle: {
// //               normal: {
// //                 color: '#009688'
// //               },
// //             }
// //           }
// //         ]
// //       };
// //       option1 && myChart1.setOption(option1);
// //       option1 && myChart2.setOption(option1);
// //       option1 && myChart3.setOption(option1);
// //     })
// //     return {
// //       mainRef,
// //       mainRef1,    mainRef2,    mainRef3,
// //       t
// //     }
// //   }
// // })
//  let charIndex = 0;
// const showMessgees = () => {
//   let intervalId = setInterval(showMessgees, 200); // 每200毫秒打印一个字符
//   if (charIndex < text.value.length) {
//     // 将文本中的字符追加到元素中
//     messgees.value += text.value[charIndex++];
//   } else {
//     // 如果已经打印完毕，清除定时器
//     clearInterval(intervalId);
//   }

// }
</script>
<!-- 
<style lang="less" scoped>
.project-grids {
  :deep(.layui-card-body) {
    padding: 0;
  }

  ;

}

.main1 {
  width: 100%;
  height: 30vmin;
}

.project-grid:hover {
  box-shadow: 1px 1px 17px #ccc;
}

.project-grid {
  padding: 24px;
  background-color: #f8f8f8;
  border-radius: 4px;
  margin: 10px;
  color: #777;

  .project-grid-title {
    padding-bottom: 10px;

    i {
      margin-right: 10px;
      font-size: 24px;
      color: #009688;
    }

    a {
      line-height: 24px;
      font-size: 16px;
      vertical-align: top;
    }

    .layui-icon {
      font-weight: 600;
    }
  }

  .project-grid-center {
    height: 44px;
    line-height: 22px;
    margin-bottom: 10px;
    overflow: hidden;
  }

  .project-grid-footer {
    position: relative;

    a {
      color: #777;
      font-size: 12px;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    span {
      color: #ccc;
      font-size: 12px;
      position: absolute;
      right: 0;
    }
  }
}

.dynamic {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  display: -webkit-flex;
  display: flex;

  .layui-status-img img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #009688;
    margin-right: 15px;
  }

  a {
    color: #0481ff;
  }

  span {
    color: #bbb;
  }
}

.links {
  padding: 10px;
}

.links a {
  width: 25%;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 8px;
  display: inline-block;
  color: #666;
}

.links a:hover {
  color: #11be73;
}

.news {
  display: block;
  line-height: 60px;
  text-align: center;
  background-color: #009688 !important;
  color: #fff !important;
  margin-bottom: 10px;
}

#main {
  height: 300px;
  width: 100%;
}
</style> -->
